<template>
  <div id="window" ref="window">

  </div>
</template>

<script>
import * as THREE from "three"
import {OrbitControls} from "three/addons/controls/OrbitControls";


export default {
  name: "Demo01",
  data() {
    return {
      scene: null,
      camera: null,
      mesh: null,
      renderer: null,
      T0: new Date(),//上次时间

    }
  },
  methods: {
    init() {
      this.scene = new THREE.Scene();


      // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
      var axisHelper = new THREE.AxesHelper(250);
      this.scene.add(axisHelper);
      // THREE.


      let material = new THREE.MeshLambertMaterial({color: 0x0000ff});

      for (let i = 0; i < 5; i++) {
        let boxGeometry = new THREE.BoxGeometry(100, 1, 100);

        let mesh = new THREE.Mesh(boxGeometry, material);
        mesh.position.set(0, i * 20, 0);
        this.scene.add(mesh);
      }

      let boxGeometry1 = new THREE.BoxGeometry(100, 1, 100);
      //
      // let boxGeometry2 = new THREE.BoxGeometry(100, 2, 100);
      //
      this.mesh = new THREE.Mesh(boxGeometry1, material);
      // let mesh = new THREE.Mesh(boxGeometry2, material);
      // mesh.position.set(0, 50, 0)
      // this.scene.add(this.mesh);
      // this.scene.add(mesh);

      /**
       * 光源设置
       */
          //点光源
      var point = new THREE.PointLight(0xffffff);
      point.position.set(400, 400, 300); //点光源位置
      this.scene.add(point); //点光源添加到场景中
      //环境光
      var ambient = new THREE.AmbientLight(0x444444);
      this.scene.add(ambient);

      /**
       * 相机设置
       */
      var width = window.innerWidth; //窗口宽度
      var height = window.innerHeight; //窗口高度
      var k = width / height; //窗口宽高比
      var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      // this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 500);
      this.camera = new THREE.PerspectiveCamera(50, k, 1, 1000);
      this.camera.position.set(200, 150, 200); //设置相机位置
      // this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象)
      this.camera.lookAt(new THREE.Vector3(0, 0, 0))


      /**
       * 创建渲染器对象
       */
      this.renderer = new THREE.WebGLRenderer();
      this.renderer.setSize(width, height);//设置渲染区域尺寸
      this.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      this.$refs.window.appendChild(this.renderer.domElement);
      //控件
      var controls = new OrbitControls(this.camera, this.renderer.domElement);//创建控件对象
      controls.addEventListener('change', this.render);//监听鼠标、键盘事件
      //执行渲染操作   指定场景、相机作为参数
      this.renderer.render(this.scene, this.camera);
      // this.render()
    },
    rotateHandel() {
      //自动旋转
      let T1 = new Date();//本次时间
      let t = T1 - this.T0;//时间差
      this.T0 = T1;//把本次时间赋值给上次时间
      this.mesh.rotateY(0.001 * t);//旋转角速度0.001弧度每毫秒
      this.renderer.render(this.scene, this.camera);//执行渲染操作
      requestAnimationFrame(this.rotateHandel);
    },
    render() {
      this.renderer.render(this.scene, this.camera);
    },
  },

  mounted() {
    this.init();


    // this.render();
    //间隔20ms周期性调用函数fun,20ms也就是刷新频率是50FPS(1s/20ms)，每秒渲染50次
    // setInterval(this.render, 20);
  },

}
</script>

<style scoped>
#webglDom,
.webgl-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
